<template>
  <div>
    <div class="suspension-box">
      <transition name="fade">
        <div class="roll-back cut-theme" @click="rollback()" v-show="controlDisplay">
          <img src="/src/assets/icon/up.png" alt="">
        </div>
      </transition>
      <transition name="fade">
        <div class="scroll" v-show="controlDisplay">
          {{ scrollNumber }}
        </div>
      </transition>
      <div class="cut-theme" @click="cutThemeMethod()">
        <img src="/src/assets/icon/cut.png" alt="" v-show="storeData.currentTheme === 'default'">
        <img src="/src/assets/icon/cut2.png" alt="" v-show="storeData.currentTheme === 'dark'">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref} from "vue";
import {store} from "@/store/index.ts";
import mitter from "@/mitt";
let storeData = store()
let controlDisplay = ref<boolean>(false)
let scrollNumber = ref(0)

onMounted(() => {
  // 监听滚动
  window.addEventListener('scroll', EventScrollMethod, true);
})

// 切换主题的功能
const cutThemeMethod = () => {
  // pinia.cutTheme()
  if (storeData.currentTheme === 'default') {
    document.documentElement.setAttribute('data-theme', 'dark')
    storeData.currentTheme = 'dark'
    // 发送信息给header组件,进行更新
    headerInform()
  }else {
    document.documentElement.removeAttribute('data-theme')
    storeData.currentTheme = 'default'
    // 发送信息给header组件,进行更新
    headerInform()
  }

}
const headerInform = () => {
  mitter.emit('changeTheme', null)
}


// 跳转到头部的功能
const rollback = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

// 监听事件
let EventScrollMethod = () => {
  if(document.documentElement.scrollTop > 2) {
    scrollNumber.value = Number(numberFormatter(document.documentElement.scrollTop))
    controlDisplay.value = true
  }else {
    controlDisplay.value = false
  }
}

// 修改数字格式
const numberFormatter = (n: number) => {
  // 去除小数点
  return (n / 100).toFixed(0)

}

onUnmounted(() => {
  // 销毁mitt事件
  mitter.off('changeTheme')
})
</script>


<style scoped lang="less">
.suspension-box{
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: row;
  .cut-theme {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--change-theme-icon-color);
    margin-left: 0.3rem;
    border-radius: 50%;
    transition: background-color 0.2s;

    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 60%;
    }
  }
  .cut-theme:hover {
    background: var(--change-theme-icon-hover-color);
  }

  .roll-back {
    background-color: white;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }

  .roll-back:hover {
    background-color: rgba(0, 0, 0, 0.06);;
  }

  .roll-back, .cut-theme :hover {
    cursor: pointer;
  }

  .scroll {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.3rem;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.6rem;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }

  @keyframes axisX {
    from {
      transform: translateX(60%);
    }
    to {
      transform: translateX(0px);
    }
  }

  .fade-enter-active, .fade-leave-active {
    animation: axisX .6s;
  }

  .fade-leave-active {
    animation: axisX .6s ;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }


}

</style>

